<script lang='ts' setup>
import { reactive,onMounted,ref} from 'vue'
import { Search } from '@element-plus/icons-vue'
import type { FormInstance, FormRules } from 'element-plus'
import type { storeNodeListData } from "/@/types/order";

const state = reactive({ 
	workType: [
		{ value: 1, label: '默认班次' },
		{ value: 2, label: '早班' },
		{ value: 3, label: '晚班' },
		{ value: 4, label: '休息' },
	],
	workTypes: [
		{ value: 1, label: '默认班次' },
		{ value: 2, label: '早班' },
		{ value: 3, label: '晚班' }, 
	],
	storeList: [] as Array<storeNodeListData>,
}) 

const props = withDefaults(defineProps<{
    id: number,
    modelValue: boolean,
    title: string 
}>(), { 
	title: '', 
	modelValue: false
})

const emit = defineEmits(['update:modelValue'])

const closeDialog = () => {
    emit('update:modelValue', false)
}
 
const formSize = ref('default')
const ruleFormRef = ref<FormInstance>()
const ruleForm = reactive({
	name: '',
	rules: 1,
	location: '陕西省西安市雁塔区',
	range: 500,
	store: '', 
	member: '',
	workType: '',
	tableData: [
		{ id: 1, name: '星期一', type: ''},
		{ id: 2, name: '星期二', type: ''},
		{ id: 3, name: '星期三', type: ''},
		{ id: 4, name: '星期四', type: ''},
		{ id: 5, name: '星期五', type: ''},
		{ id: 6, name: '星期六', type: ''},
		{ id: 7, name: '星期天', type: ''},
	] as Array<any>, 
})

const rules = reactive<FormRules<any>>({
	name: [ { required: true, message: '请输入考勤组名称', trigger: 'blur' }],
	rules: [ { required: true, message: '请选择考勤班制', trigger: 'change', }],
	store: [ { required: true, message: '请选择门店', trigger: 'change', }],
	location: [ { required: true, message: '请选择位置', trigger: 'change', }],
	range: [ { required: true, message: '请选择打卡范围', trigger: 'change', }],
	member: [ { required: true, message: '请选择员工', trigger: 'change', }],
	workType: [ { required: true, message: '请选择班次', trigger: 'change', }],
})

const submitForm = async (formEl: FormInstance | undefined) => {
	if (!formEl) return
	await formEl.validate((valid, fields) => {
		if (valid) {
			console.log('submit!')
		} else {
			console.log('error submit!', fields)
		}
	})
}

const resetForm = (formEl: FormInstance | undefined) => {
	if (!formEl) return
	formEl.resetFields()
	closeDialog()
}


</script>

<template>
    <main>
        <el-dialog v-model="props.modelValue" :title="props.title" @close="closeDialog" style="width: 800px;" center>
            <section>
				<el-form
					ref="ruleFormRef"
					:model="ruleForm"
					:rules="rules"
					label-width="120px"
					class="demo-ruleForm"
					:size="formSize"
					status-icon
				>
					<el-form-item label="考勤组名称" prop="name">
						<el-input v-model="ruleForm.name" placeholder="请输入考勤组名称" />
					</el-form-item>
					<el-form-item label="考勤班制" prop="rules">
						<el-radio-group v-model="ruleForm.rules">
							<el-radio :label="1">固定班制</el-radio>
							<el-radio :label="2">排班制</el-radio>
						</el-radio-group>
					</el-form-item> 

					<el-form-item label="固定班制" v-if="ruleForm.rules === 1">
						<el-table :data="ruleForm.tableData" style="width: 100%" border> 
							<el-table-column label="工作日" prop="name" />
							<el-table-column label="排班类型" >
								<template #default="scope">
									<el-select v-model="scope.row.type" placeholder="请选择排班类型" class="w100">
										<el-option v-for="item in state.workType" :key="item.value" :label="item.label"
											:value="item.value" />
									</el-select>
								</template>
							</el-table-column>
						</el-table>
					</el-form-item> 

					<el-form-item label="门店坐标" prop="location">
						<el-input v-model="ruleForm.location" readonly placeholder="Please input" class="input-with-select" >
							<template #append>
								<el-button :icon="Search">查找位置</el-button>
							</template> 
						</el-input>
					</el-form-item>

					<el-form-item label="打卡范围(米)" prop="range">
						<el-input-number v-model="ruleForm.range" :min="500" :max="1000"  /> 
					</el-form-item>

					<el-form-item label="选择门店" prop="store">
						<el-select v-model="ruleForm.store" placeholder="请选择门店" class="w100">
							<el-option v-for="item in state.storeList" :key="item.id" :label="item.name"
								:value="item.id" />
						</el-select>
					</el-form-item> 

					<el-form-item label="添加员工" prop="member">
						<el-select v-model="ruleForm.member" placeholder="请选择员工" class="w100" multiple>
							<el-option v-for="item in state.storeList" :key="item.id" :label="item.name"
								:value="item.id" />
						</el-select>
					</el-form-item> 

					<el-form-item label="选择班次" prop="workType">
						<el-select v-model="ruleForm.workType" placeholder="请选择班次" class="w100" multiple>
							<el-option v-for="item in state.workTypes" :key="item.value" :label="item.label"
								:value="item.value" />
						</el-select>
					</el-form-item> 
 
					<section class="flex-jCenter mt30">
						<el-button type="primary" @click="submitForm(ruleFormRef)">
							确定
						</el-button>
						<el-button @click="resetForm(ruleFormRef)">取消</el-button>
					</section>
				</el-form>
			</section>
        </el-dialog>
    </main>
</template>

<style lang='scss' scoped>

</style>